<!--  -->
<template>
  <div class="main">
    <div class="cont">
      <div class="top">
        <div class="title">
          <img src="../../assets/images/home/成功.png" alt="" />
          <p class="font18 fwbold">{{ t("商品已成功加入购物车") }}</p>
        </div>
        <div class="details">
          <img src="../../assets/images/home/图层 11.png" alt="" />
          <div>
            <p class="font16 fw400">iPhone 15 Pro Max手机壳</p>
            <p class="font14 fw400" style="color: #999">
              颜色：黑色 <span>数量：1</span>
            </p>
          </div>
        </div>
        <div class="btn">
          <button class="check" @click="toDetail">
            {{ t("查看商品详情") }}
          </button>
          <button class="gocar" @click="gosc">{{ t("去购物车结算") }}</button>
        </div>
      </div>
      <div class="recommend">
        <h2 class="ptb10">{{ t("您可能还需要") }}</h2>
        <ul>
          <li v-for="(item, idx) in goods_list" :key="idx">
            <img :src="item.thumbnail | imgSrc" alt="" />
            <div>
              <p class="font18 fwbold">{{ item.goods_name || "--" }}</p>
              <p class="font18 fwbold ff5" style="margin: 24px 0 16px 0">
                {{ $t("公共.货币符号") }} {{ item.price }}
              </p>
              <button @click="add_shop_cart(item)">
                {{ t("加入购物车") }}
              </button>
            </div>
          </li>
        </ul>
      </div>
      <!-- <div class="page">
                <el-pagination background layout="prev, pager, next" :total="280">
                </el-pagination>
            </div> -->
    </div>
  </div>
</template>

<script>
import { getRecommendGoodsList, addShopCart } from "@/utils/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      goods_list: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`购物车.${v}`);
    },
    // 跳转购物车
    gosc() {
      this.$router.push("shoppingCart");
    },
    toDetail() {
      this.$router.go(-1);
    },
    add_shop_cart(item) {
      addShopCart({
        sku_id: item.id,
        number: 1,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
        }
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    getRecommendGoodsList().then((res) => {
      if (res.code == 1) {
        this.goods_list = res.data;
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.main {
  min-height: calc(100vh - 90px);
  background-color: #f9f9f9;

  .cont {
    margin: 0px 105px;
    display: flex;
    flex-flow: row wrap;

    .top {
      width: 1700px;
      height: 300px;
      background: #ffffff;
      margin: 20px 0px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .title {
        display: flex;
        align-items: center;

        p {
          margin-left: 15px;
        }
      }

      .details {
        display: flex;
        margin: 30px 0;

        img {
          width: 60px;
          height: 60px;
          background: #f9f9f9;
          border-radius: 5px;
          border: 1px solid #e3e3e3;
          margin-right: 10px;
        }
      }

      .btn {
        button {
          width: 200px;
          height: 40px;
          border-radius: 10px;
          border: 0;
          color: #fff;
        }

        .check {
          background: #000000;
          margin-right: 20px;
        }

        .gocar {
          background: #ff5757;
        }
      }
    }

    .recommend {
      width: 100%;

      ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;

        li {
          box-sizing: border-box;
          padding: 15px;
          width: 410px;
          height: 160px;
          background: #ffffff;
          margin-bottom: 10px;
          display: flex;
          // justify-content: center;
          align-items: center;
          // gap: 15%;

          img {
            width: 130px;
            height: 130px;
            background: #f9f9f9;
            border-radius: 5px;
            border: 1px solid #e3e3e3;
            margin-right: 16px;
            object-fit: contain;
          }

          div {
            flex: 1;
            button {
              width: 120px;
              height: 40px;
              background: #ff5757;
              border-radius: 20px;
              font-weight: 400;
              font-size: 16px;
              color: #ffffff;
              border: 0;
            }
          }
        }
      }
    }

    .page {
      width: 100%;
      display: flex;
      justify-content: center;
      margin: 40px 0;
    }
  }
}
</style>
